<!DOCTYPE html>
<html>
<head>
    <title>瀑布流</title>
    <style>
        .container {
            /*这两个属性创建两列固定宽度的布局*/
            /*一列的宽度*/
            column-width: 500px;
            /*两列间的间隔*/
            column-gap: 20px;
        }
        .item {
            /*防止内容在列之间中断*/
            break-inside: avoid;
            margin-bottom: 20px;
        }
        .item img {
            /*图像适应列大小*/
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<!--JavaScript瀑布流是一种流行的前端Web开发技术，用于创建动态布局，它类似于瀑布效果，其中内容按列或网格排列，并自适应各自的尺寸。
Masonry是一个流行的JavaScript库，它可以帮助开发人员实现这种瀑布流效果。这种技术可以用于显示图像、视频、帖子、新闻等多种内容。-->
<div class="container">
    <div class="item"><img src="image.png" alt="Image 1"></div>
    <div class="item"><img src="image.png" alt="Image 2"></div>
    <div class="item"><img src="image.png" alt="Image 3"></div>
    <div class="item"><img src="image.png" alt="Image 4"></div>
    <div class="item"><img src="image.png" alt="Image 5"></div>
    <div class="item"><img src="image.png" alt="Image 6"></div>
    <div class="item"><img src="image.png" alt="Image 7"></div>
    <div class="item"><img src="image.png" alt="Image 8"></div>
    <div class="item"><img src="image.png" alt="Image 9"></div>
    <div class="item"><img src="image.png" alt="Image 10"></div>
</div>
</body>
</html>
